<template>
	<view class="g-main">
		<search
			v-model="search"
			:placeholder="'搜索品牌/车型/指导价'"
			:customStyle="'box-shadow: 0px 2px 13px 0px rgba(28,30,33,0.08);position: fixed;top: 0;left: 0;z-index: 1;'"
			:customClass="['f-bdr-scircle']"
			@search="searchHandler"
		></search>
		<view class="g-search-storage f-bc-whilte" v-if="searchKeyManager.searchKeyList.length != 0">
			<view class="f-frowspcen">
				<text class="header-item f-fz15 f-fc-primary">历史搜索</text>
				<text class="header-item f-fz14 f-fc-purple" @tap="clear">清空</text>
			</view>
			<view class="f-frow f-fwrap g-storage">
				<view class="storage-item f-fz13 f-bdr-scircle" v-for="(item, index) in searchKeyManager.searchKeyList" :key="index">{{ item }}</view>
			</view>
		</view>
		<storage-item v-for="item in list" :key="index"></storage-item>
		<loadmore :status="loadStatus"></loadmore>
		<u-modal ref="modal"></u-modal>
	</view>
</template>

<script>
import reachBottomListMix from '../../mixins/reachBottomList.js';
import SearchKeyManager from '../../util/SearchKeyManager.js';
export default {
	mixins: [reachBottomListMix],
	data() {
		return {
			search: '', // 搜索
			searchKeyManager: null
		};
	},
	onLoad() {
		const that = this;
		that.searchKeyManager = new SearchKeyManager('searchStorage', 10);
	},
	watch: {
		search(val) {
			const that = this;
			if (!val) {
				that.list = [];
				that.page = 1;
				that.loadStatus = 'more';
			}
		}
	},
	methods: {
		/**
		 * 清除历史记录
		 * */

		clear() {
			const that = this;
			that.$refs.modal.showModal({
				content: '清除历史记录？',
				success(res) {
					if (res.confirm) that.searchKeyManager.clearKey();
				}
			});
		},
		
		/**
		 * 搜素
		 * */
		
		searchHandler() {
			const that = this;

			// 添加记录
			that.searchKeyManager.addKey(that.search);

			// 搜索记录
		}
	}
};
</script>

<style lang="scss" scoped>
.g-main {
	padding-top: 128rpx;
}
.g-search-storage {
	.header-item {
		padding: 28rpx 30rpx;
	}
	.g-storage {
		padding: 0 18rpx;
		.storage-item {
			height: 58rpx;
			line-height: 58rpx;
			padding: 0 20rpx;
			border: 1px solid #ccc;
			margin: 0 12rpx 24rpx;
		}
	}
}
</style>
